<template>
  <div class="box">
    <!-- 首页 -->

    <div class="HelloWorld echart-box" ref="myechart"></div>

    <div class="HelloWorld echart-box" ref="myechart2"></div>

    <div class=" echart-box" ref="myechart3"></div>

    <div style="width:600px; height:600px" ref="myechart4"></div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      // 定义图表，各种参数
      option: {
        title: {
          text: "折线图堆叠",
          link: "https://echarts.apache.org/zh/option.html#title",
          // x: "center",
          // y: "top",
          // textAlign: "center",
          textStyle: {
            color: "pink",
          },
          borderWidth: 1,
        },
        // 提示框圆点显示,鼠标滑过 或者点击显示提示框
        tooltip: {
          // 触发的类型item / axis
          trigger: "axis",
          // 触发时机 mousemove click
          triggerOn: "click",
          // 弹出的提示框呈现什么样子
          // formatter:"{a} 尼玛 {b}",
          formatter: (arg) => {
            // console.log(arg);
            return "今天" + arg[0].name;
          },
        },
        // 筛选图形系列
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },

        // 显示内容调整位置
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true,
        // },

        // 提供工具栏
        toolbox: {
          feature: {
            // 导出图片的功能
            saveAsImage: {},
            // 数据视图功能可以编辑
            dataView: {},
            // 设置重置按钮
            restore: {},
            // 区域缩放功能
            dataZoom: {},
            // 切换不同类型的视图
            magicType: {
              type: ["bar", "line"],
            },
          },
        },

        //高级版本缩放功能按钮
        dataZoom: [
          {
            // type: "slider",
            type: "slider",
            xAxisIndex: 0,
          },
          {
            // type: "slider",
            type: "slider",
            yAxisIndex: 0,
          },
        ],
        // 代表直角坐标系中的X轴
        xAxis: {
          type: "category", //类目轴~意思是起名字
          // 是否数据显示在中间位置：默认是ture
          boundaryGap: true,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        // 代表直角坐标系的Y轴
        yAxis: {
          type: "value", //数值轴
        },
        // 系列列表，每个系列通过type属性决定自己的图表类型
        // bar就是柱形列表
        // line 就是曲线型列表
        // pie 饼状
        series: [
          {
            name: "邮件营销",
            type: "bar",
            // stack: "总量",
            // 显示最大值最小值
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            // 求平均值
            markLine: { data: [{ type: "average", name: "平均值" }] },
            data: [120, 132, 101, 134, 90, 230, 210],
            // 显示具体数值
            label: {
              show: true,
              // 文字旋转
              rotate: 30,
            },
            barMaxWidth: "50%",
          },
          {
            name: "联盟广告",
            type: "bar",
            // stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          // {
          //   name: "视频广告",
          //   type: "line",
          //   stack: "总量",
          //   data: [150, 232, 201, 154, 190, 330, 410],
          // },
          // {
          //   name: "直接访问",
          //   type: "line",
          //   stack: "总量",
          //   data: [320, 332, 301, 334, 390, 330, 320],
          // },
          // {
          //   name: "搜索引擎",
          //   type: "line",
          //   stack: "总量",
          //   data: [820, 932, 901, 934, 1290, 1330, 1320],
          // },
        ],
      },
      // 折现图
      option2: {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "康师傅",
            data: [9000, 12000, 98923, 88888, 90900, 99999],
            type: "line",
            // 设置最大值 最小值
            markPoint: {
              data: [
                {
                  type: "max",
                },
                {
                  type: "min",
                },
              ],
            },
            // 设置平均值
            markLine: {
              data: [
                {
                  type: "average",
                },
              ],
            },
            // 设置特定区间
            markArea: {
              data: [
                [
                  {
                    xAxis: "1月",
                  },
                  {
                    xAxis: "2月",
                  },
                ],
                [
                  {
                    xAxis: "4月",
                  },
                  {
                    xAxis: "5月",
                  },
                ],
              ],
            },
            // 设置线条平滑
            smooth: true,
            // 设置线条颜色
            lineStyle: {
              color: "green",
            },
          },
        ],
      },
      // 折现图
      option3: {
        grid: {},
        xAxis: {},
        yAxis: {},
        series: [
          {
            type: "pie",
            data: [
              { name: "淘宝", value: 123 },
              { name: "京东", value: 321 },
              { name: "你CIA", value: 444 },
              { name: "yoyo", value: 999 },
            ],
            // 显示文字
            label: {
              show: true,
              // 修改显示文字
              formatter: (arg) => {
                return (
                  arg.name + "平台花费" + arg.value + "元\n" + arg.percent + "%"
                );
              },
            },
            // 半径大小
            // radius:"50%"
            // radius:["50%","70%"]
            // 南丁格尔图
            roseType: "radius",
            // 选中效果
            // selectedMode:"single"
            selectedMode: "multiple",
            // 点击后偏移距离
            selectedOffset: 30,
          },
        ],
      },

      // 地图
      // option4: {
      //   geo: {
      //     type: "map",
      //     map: "china",
      //   },
      // },
      data: "",
    };
  },

  components: {},

  computed: {},
  created() {
    axios.get("/map/map.json").then((res) => {
      // console.log(res.data);
      this.$store.dispatch("maps",res.data)
      // this.$echarts.registerMap("china", this.data);
      // console.log(this.$echarts);
    });
  },

  beforeMount() {},

  mounted() {
    // console.log(this.$refs);
    let myechart = this.$echarts.init(this.$refs.myechart); //初始化一个echarts
    myechart.setOption(this.option); //setOption 用this.option中的数据开始作图

    let myechart2 = this.$echarts.init(this.$refs.myechart2); //初始化一个echarts
    myechart2.setOption(this.option2); //setOption 用this.option中的数据开始作图

    let myechart3 = this.$echarts.init(this.$refs.myechart3); //初始化一个echarts
    myechart3.setOption(this.option3); //setOption 用this.option中的数据开始作图
      console.log(1);
    let myechart4 = this.$echarts.init(this.$refs.myechart4); //初始化一个echarts
    // this.$nextTick(()=>{

    // this.$echarts.registerMap("china", this.data);
    // })
    console.log(this.$store.state.tab);
    this.$echarts.registerMap("china", this.$store.state.tab);
    console.log(this.$echarts);
    let option4 = {
      geo: {
        type: "map",
        map: "china",
      },
    };
    myechart4.setOption(option4); //setOption 用this.option中的数据开始作图
  },

  methods: {},

  watch: {},
};

import axios from "axios";
</script>
<style lang="scss" scoped>
.box {
  background: #f0f2f5;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.echart-box {
  height: 600px;
  width: 600px;
  border: none;
}
</style>
